<template>
  <div class="index">
    <!-- <div class="search">
      <form action="/">
        <van-search
          shape="round"
          v-model="searchBook"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </form>
    </div>-->
    <div class="books">
      <!-- <van-row type="flex" justify="space-around">
        <van-col span="6">
          <div class="book">
            <img src="../assets/book1.jpg" alt />
            <span>书名</span>
          </div>
        </van-col>
        <van-col span="6">
          <div class="book">
            <img src="../assets/book1.jpg" alt />
            <span>书名</span>
          </div>
        </van-col>
        <van-col span="6">
          <div class="book">
            <img src="../assets/book1.jpg" alt />
            <span>书名</span>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around">
        <van-col span="6">
          <div class="book">
            <img src="../assets/book1.jpg" alt />
            <span>书名</span>
          </div>
        </van-col>
        <van-col span="6">
          <div class="book">
            <img src="../assets/book1.jpg" alt />
            <span>书名</span>
          </div>
        </van-col>
        <van-col span="6">
          <div class="book">
            <img src="../assets/book1.jpg" alt />
            <span>书名</span>
          </div>
        </van-col>
      </van-row>-->

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image src="http://txt22262.book118.com/2018/0307/book156151/156150398.png" />
          <span>书名</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="http://www.kfzimg.com/G05/M00/21/AE/p4YBAFj_PIqASN1bAABCstWmWiU980_b.jpg" />
          <span>书名</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="http://txt39-1.book118.com/2018/0302/book155411/155410134.png" />
          <span>书名</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="http://txt22262.book118.com/2018/0307/book156151/156150398.png" />
          <span>书名</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="http://www.kfzimg.com/G05/M00/21/AE/p4YBAFj_PIqASN1bAABCstWmWiU980_b.jpg" />
          <span>书名</span>
        </van-grid-item>
        <van-grid-item>
          <van-image src="http://txt39-1.book118.com/2018/0302/book155411/155410134.png" />
          <span>书名</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexLibrary",
  props: {
    searchBook: String
  },
  methods: {
    onSearch() {},
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped >
.index {
  padding-top: 3%;
}
.book {
  margin-top: 3%;
  text-align: center;
  img {
    width: 100%;
  }
}
</style>
